/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import Field from '@model/entity/Field'
/* hooks */
import { useQualityRuleForm } from '@hooks/useQualityRule'
/* props */
import { viewProps } from '@src/component/form/components/props'
/* scss */
import '@src/component/form/components/FormQualityRuleField/FormQualityRule.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef } from 'vue'
import { CommonComponentInstance } from '@model/VC'

export interface FormQualityRuleViewSetupState {
  groupFields: ComputedRef<Field[]>
  qualityRuleField: ComputedRef<Field>
  qualityRuleFieldValue: Record<string, any>
}

export type FormQualityRuleViewInstance = ComponentInstance & FormQualityRuleViewSetupState
export type FormQualityRuleViewVM = ComponentRenderProxy<FormQualityRuleViewProps> & CommonComponentInstance

export type FormQualityRuleViewProps = {
  field: Field | undefined,
  originValue: Record<string, any> | undefined,
  value: Record<string, any> | undefined
}

export default defineComponent<FormQualityRuleViewProps, FormQualityRuleViewSetupState>({
  name: ComponentNameEnum.FormQualityRuleView,
  props: {
    ...viewProps,
    originValue: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props: FormQualityRuleViewProps, { emit }) {
    const [ groupFields, qualityRuleField, qualityRuleFieldValue ] = useQualityRuleForm(props)
    
    return {
      groupFields,
      qualityRuleField,
      qualityRuleFieldValue
    }
  },
  render() {
    return (
      <div class="form-view-row form-quality-rule-view-row">
        <form-group-view field={this.qualityRuleField} value={this.qualityRuleFieldValue}>
        </form-group-view>
      </div>
    )
  }
})
